<script lang="ts" setup>
import { defineProps, onMounted, reactive, ref } from "vue";
import { requestsongListAllSong } from "../../../utils/axiosURL"

const { id, name } = defineProps(["id", "name", "picUrl"])
const ID = ref<any>(id)
// 所有歌曲
const AllSongs = reactive<any>([])
// 存储数据长度
let songLength = ref<any>(0)

const requestsongListAllSongFn = () => {
  requestsongListAllSong(ID.value).then((data: any) => {
    songLength.value = data.songs.length
    AllSongs.values = data.songs.slice(0, 10)
  }).catch(err => {
    console.log(err)
  })
}

onMounted(() => {
  requestsongListAllSongFn()
})

</script>

<template>
  <div class="legendItem">
    <div class="leftWrapImg">
      <RouterLink :to="`/SongListDetail/${ID}`">
        <img :src="picUrl" alt="">
      </RouterLink>
    </div>
    <div class="rightWrapList">
      <RouterLink :to="`/SongListDetail/${ID}`">
        <p class="listenMusicTop">{{ name }}</p>
      </RouterLink>
      <legendItemList :songData="AllSongs.values" />
      <RouterLink :to="`/SongListDetail/${ID}`">
        <div class="viewMore" v-if="songLength >= 10">查看全部{{ songLength }}首</div>
      </RouterLink>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.legendItem {
  display: flex;
  width: 100%;
  margin-top: 30px;

  .leftWrapImg {
    width: 180px;
    height: 180px;
    margin-left: 25px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #99a9bf;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .rightWrapList {
    flex: 1;
    margin-left: 60px;

    .listenMusicTop {
      font-size: $font-size-md;
      font-family: $activeTextFont;
      color: #4a4a4a;

      &:hover {
        color: #000000;
      }
    }

    .viewMore {
      width: 100%;
      margin-right: 10px;
      line-height: 35px;
      text-align: right;
      padding-right: 30px;
      box-sizing: border-box;
      font-size: $font-size-xs;
      font-family: $activeTextFont;
      color: $font_second_color;
      background-color: rgb(250, 250, 250);
    }
  }
}
</style>
